<template>
	<view class="zhekoujuan">
		<div class="items">
			<u--form labelPosition="left" labelWidth="100" ref="form1">
				<typeSelector @getdata="gettype" :list="columns">
					<u-form-item label="卡券类型" borderBottom ref="item1">
						<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择卡券类型" disabled v-model="type"
							inputAlign="right" border="none"></u--input>
						<u-icon name="arrow-right"></u-icon>
					</u-form-item>
				</typeSelector>
				<dateTimePicker @getdata="getstartdate">
					<u-form-item label="开始时间" borderBottom ref="item1">
						<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择开始时间" disabled
							v-model="startdate" inputAlign="right" border="none"></u--input>
						<u-icon name="arrow-right"></u-icon>
					</u-form-item>
				</dateTimePicker>
				<dateTimePicker @getdata="getenddate">
				<u-form-item label="到期时间" borderBottom ref="item1">
					<u--input class="inputx" disabledColor="#ffffff" placeholder="请选择到期时间" disabled v-model="enddate"
						inputAlign="right" border="none"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
				</dateTimePicker>
				<u-form-item label="卡券数量" borderBottom ref="item1">
					<u--input class="inputx" v-model="num" inputAlign="right" placeholder="请输入数量" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="卡券内容" borderBottom ref="item1">
					<u--input class="inputx" v-model="content" placeholder="请输入卡券内容" inputAlign="right" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="卡券地址" borderBottom ref="item1">
					<u--input class="inputx" v-model="address" placeholder="请输入卡券使用地址" inputAlign="right" border="none">
					</u--input>
				</u-form-item>
			</u--form>
		</div>
		<div class="confirm">
			<u-button @click="confirm" type="primary">确认</u-button>
		</div>
	</view>
</template>

<script>
	import moment from 'moment'
	import typeSelector from '../../components/typeSelector/typeSelector.vue'
	import dateTimePicker from '../../components/dateTimePicker/dateTimePicker.vue'
	export default {
		components: {
			typeSelector,
			dateTimePicker
		},
		data() {
			return {
				address: '',
				content: '',
				num: '',
				startdate: '',
				enddate: '',
				type: '',
				columns: [
					['类型一', '类型二', '类型三']
				],
			};
		},
		mounted() {
			var that = this;
		},
		methods: {
			confirm() {
				uni.navigateBack({

				})
			},
			gettype(e) {
				this.type = e.value[0]
			},
			getenddate(e) {
				console.log(e)
				if (e.value) {
					this.enddate = moment(e.value).format("YYYY-MM-DD")
				}
			},
			getstartdate(e) {
				console.log(e)
				if (e.value) {
					this.startdate = moment(e.value).format("YYYY-MM-DD")
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.zhekoujuan {
		background: rgba(0, 0, 0, 0);
	}

	.items {
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.confirm {
		width: 690rpx;
		margin: 60rpx auto;
	}
</style>
